<template>
	<view>
		<uv-waterfall :column-count='2' ref="waterfall" v-model="list" :left-gap="10" :right-gap="10" :add-time="10"
			:column-gap="10" @changeList="changeList">
			<!-- 第一列数据 -->
			<template v-slot:list1>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, i) in list1" :key="i" class="waterfall-item" @tap="goShopDetail">
						<image :src="item.url" mode="widthFix" style="width: 100%;"></image>
						<view class="content-box">
							<view class="title">湿巾80抽湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾湿巾</view>
							<view class="price-box">
								<text class="real-price">￥8.80</text>
								<text class="through-price">￥19.90</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 第二列数据 -->
			<template v-slot:list2>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, i) in list2" :key="i" class="waterfall-item" @tap="goShopDetail">
						<image :src="item.url" mode="widthFix" style="width: 100%;"></image>
						<view class="content-box">
							<view class="title">湿巾80抽</view>
							<view class="price-box">
								<text class="real-price">￥8.80</text>
								<text class="through-price">￥19.90</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>
	</view>
</template>

<script setup lang="ts">
	import { reactive, readonly, ref } from 'vue';
	const list = reactive([])// 瀑布流全部数据
	
	
	const list1 = reactive([
		{ url: 'https://via.placeholder.com/100x110.png/3c9cff/fff', width: 100, height: 110 },
		{ url: 'https://via.placeholder.com/200x220.png/f9ae3d/fff', width: 200, height: 220 },
		{ url: 'https://via.placeholder.com/300x340.png/5ac725/fff', width: 300, height: 340 },
		{ url: 'https://via.placeholder.com/400x400.png/f56c6c/fff', width: 400, height: 400 },
	])// 瀑布流第一列数据
	const list2 = reactive([
		{ url: 'https://via.placeholder.com/100x110.png/3c9cff/fff', width: 100, height: 110 },
		{ url: 'https://via.placeholder.com/200x220.png/f9ae3d/fff', width: 200, height: 220 },
		{ url: 'https://via.placeholder.com/300x340.png/5ac725/fff', width: 300, height: 340 },
		{ url: 'https://via.placeholder.com/400x400.png/f56c6c/fff', width: 400, height: 400 },
	])// 瀑布流第二列数据
	// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
	const changeList = (e) => {
		console.log(e);
		// [e.name].push(e.value);
	}
	const goShopDetail = () => {
		uni.navigateTo({
			url: '/order/shopping/detail'
		})
	}
</script>

<style lang="scss" scoped>
	.waterfall-item {
		width: 341rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		margin-bottom: 20rpx;
		border-radius: 14rpx;
		overflow: hidden;
	
		.content-box {
			padding: 22rpx 26rpx;
	
			.title {
				font-size: 28rpx;
				color: #292929;
				@include more-over-ellip(2);
			}
	
			.price-box {
				
				margin-top: 20rpx;
	
				.real-price {
					font-size: 28rpx;
					color: #FF7E00;
				}
	
				.through-price {
					margin-left: 10rpx;
					font-size: 22rpx;
					color: #C0C0C0;
					text-decoration: line-through;
				}
			}
		}
	}
</style>